<template>
	<a-typography>
		<a-typography-title id="title" :heading="3" v-if="goodsList.data">
			&nbsp;
			<i class="iconfont iconfont-description" style="font-size: 28px;"></i>
			{{goodsList.data.title}}
		</a-typography-title>
	</a-typography>
	<a-layout-header v-if="goodsList.data">
		<div id="evaluating">
			<a-layout>
				<a-layout>
					<a-layout-header>
						<div id="evaluating-title">
							<a-typography>
								<a-typography-title id="description">
									<a-image width="250" height="250" class="img-show" :src="goodsList.data.href" />
									<div style="margin-left: 33%;margin-top: -29.9%;height: auto;width: 67%;">
										<a-space :size="17" direction="vertical" fill>
											<span>
												<span style="color: gray;">标签:&nbsp;</span>
												<a-space>
													<a-tag color="#c5d4e5" style="color:#0f1012;"
														v-for="(item,index) in goodsList.data.formatInfo">
														<template #icon>
															<icon-info-circle-fill />
														</template>
														{{item}}
													</a-tag>
												</a-space>
											</span>
											<span>
												<span style="color: gray;">简介:&nbsp;</span>
												<div style="width: 520px;margin-left: 5.5%;margin-top: -2.5%;">
													<span>
														{{goodsList.data.description}}
													</span>
												</div>
											</span>
											<span>
												<span style="color: gray;">评分:&nbsp;</span>
												<div style="width: 560px;margin-left: 5.5%;margin-top: -4%;">
													<span>
														<a-statistic :value="goodsList.data.rate" :precision="2"
															:value-from="0" :start="true" animation>
														</a-statistic>
														&nbsp;
														<a-rate :default-value="goodsList.data.rate" allow-half
															readonly />
													</span>
												</div>
											</span>
											<span>
												<span style="color: gray;">我的评分:&nbsp;</span>
												<div style="width: 560px;margin-left: 9.5%;margin-top: -4%;">
													<span>
														<a-statistic :value="goodsList.data.myRate" :precision="2"
															:value-from="0" :start="true" animation>
														</a-statistic>
														&nbsp;
														<a-tooltip :content="tips" position="top" mini
															v-if="goodsList.data.myRate == 0">
															<a-rate ref="myRate" :default-value="rate" allow-half
																@hover-change="valueChange" @change="changeRate"/>
														</a-tooltip>
														<a-rate ref="myRate" :default-value="rate" allow-half
															@hover-change="valueChange" :readonly="true"
															v-else-if="goodsList.data.myRate != 0" />
													</span>
												</div>
											</span>
											<span>
												<a-space>
													<a-button type="primary" @click="addCart">
														<template #icon>
															<i class="iconfont iconfont-mart"></i>
														</template>
														<template #default>
															加购
														</template>
													</a-button>
													<a-button type="primary">
														<template #icon>
															<icon-face-smile-fill />
														</template>
														<template #default>
															想入 ({{goodsList.data.buy}})
														</template>
													</a-button>
												</a-space>
											</span>
											<span>
												<a-typography>
													<a-typography-paragraph :copy-text="currentUrl" copyable>
														<a-input style="width: 400px;" :model-value="currentUrl"
															disabled />
													</a-typography-paragraph>
												</a-typography>
												<a-typography-paragraph>
													<a-popover position="rb" :content-style="{
														width:'110px',
														height:'110px'
													}">
														<template #content>
															<a-image width="100" height="100"
																style="margin-left: -15%;margin-top: -15%;"
																:src="apiUrlINFO+apiUrl.qrCode" draggable="false"
																:preview="false" />
														</template>
														<a-button type="primary" shape="round">
															<template #icon>
																<icon-wechat />
															</template>
															扫码分享
														</a-button>
													</a-popover>
												</a-typography-paragraph>
											</span>
										</a-space>
									</div>
								</a-typography-title>
							</a-typography>
						</div>
					</a-layout-header>
					<a-layout-content>
						<div id="article" v-if="goodsPic.data">
							<a-space direction="vertical" size="large">
								<a-list style="width: 114.3%;">
									<template #header>
										<a-menu mode="horizontal" :default-selected-keys="currentMenuItem"
											@menu-item-click="getMenuItem" style="margin-left: -9%;">
											<a-menu-item key="0" disabled></a-menu-item>
											<a-menu-item key="1" v-if="goodsPic.data.manual != null">
												<template #icon>
													<icon-book />
												</template>
												<span>封绘说明书</span>
											</a-menu-item>
											<a-menu-item key="2" v-if="goodsPic.data.pictures != null">
												<template #icon>
													<icon-file />
												</template>
												<span>官图</span>
											</a-menu-item>
											<a-menu-item v-if="currentMenuItem.length == 0">
												<template #icon>
													<icon-eye-invisible />
												</template>
												<span>未找到图片</span>
											</a-menu-item>
										</a-menu>
									</template>
									<a-list-item>
										<div id="fillContent" v-html="goodsPic.data.manual" v-if="currentMenuItem[0]=='1'"></div>
										<div id="fillContent" v-html="goodsPic.data.pictures" v-else-if="currentMenuItem[0]=='2'"></div>
										<div id="fillContent" v-if="currentMenuItem.length == 0">
											<a-result :status="null">
												<template #icon>
													<IconFaceFrownFill style="color: gray;"/>
												</template>
												<template #title>这里什么也没有哦</template>
												<template #extra>
													<a-button type="primary" @click="()=>{router.push({path: '/index'});}">前往首页</a-button>
												</template>
												<a-typography style="background: var(--color-fill-2); padding: 24px;">
													<a-typography-paragraph>未找到与该商品相关的图片</a-typography-paragraph>
												</a-typography>
											</a-result>
										</div>
									</a-list-item>
								</a-list>
							</a-space>
						</div>
					</a-layout-content>
				</a-layout>
				<a-layout-sider style="width: 445px;margin-right: 6.9%;margin-top: -0.1%;height: auto;">
					<a-space :size="20" direction="vertical" fill>
						<div style="width: 100%;">
							<a-card hoverable style="text-align: left;">
								<a-space :size="15" direction="vertical" style="margin-left: 2%;" fill>
									<span>
										<span style="color: gray;">厂商:&nbsp;</span>
										<span class="firmDescription-two blue">{{goodsList.data.brand}}</span>
									</span>
									<span>
										<span style="color: gray;">系列:&nbsp;</span>
										<span class="firmDescription-two blue">{{goodsList.data.series}}</span>
									</span>
									<span>
										<span style="color: gray;">级别或分类:&nbsp;</span>
										<span class="firmDescription-five blue">{{goodsList.data.sort}}</span>
									</span>
									<span>
										<span style="color: gray;">发售时间:&nbsp;</span>
										<span class="firmDescription-four">{{goodsList.data.saleTime[0]}}</span>
									</span>
									<span>
										<span style="color: gray;">价格:&nbsp;</span>
										<span class="firmDescription-two">{{goodsList.data.price}}元</span>
									</span>
									<span>
										<span style="color: gray;">名称:&nbsp;</span>
										<span class="firmDescription-two">{{goodsList.data.name}}</span>
									</span>
									<span>
										<a-row style="height: auto;margin-bottom: -3%;">
											<a-col flex="85px" style="color: gray;">人物名:&nbsp;</a-col>
											<a-col flex="310px">
												<a-space :size="17" wrap>
													<span v-for="item in goodsList.data.formatNickName">{{item}}</span>
												</a-space>
											</a-col>
										</a-row>
									</span>
									<span>
										<span style="color: gray;">版本:&nbsp;</span>
										<span class="firmDescription-two">{{goodsList.data.version}}</span>
									</span>
									<span>
										<span style="color: gray;">材料种类:&nbsp;</span>
										<span class="firmDescription-four">{{goodsList.data.mType}}</span>
									</span>
									<span>
										<span style="color: gray;">玩具分类:&nbsp;</span>
										<span class="firmDescription-four">{{goodsList.data.tType}}</span>
									</span>
								</a-space>
							</a-card>
						</div>
						<div style="width: 100%;height: auto;" >
							<emojiComment :commentsList="commentList.resp" :mentionsList="mentionList.data"
									:currentPage="currentPage" :currentPageSize="currentPageSize"
									:dId="dId" @refrushParnentComment="refrushComment"
									@PageChange="getcurrentPage" v-if="commentList.resp">
							</emojiComment>
						</div>
					</a-space>
				</a-layout-sider>
			</a-layout>
			<a-layout-footer>
				<div id="footer">
					<a-layout-header id="footer-header">
						<a-divider />
					</a-layout-header>
				</div>
			</a-layout-footer>
		</div>
	</a-layout-header>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance,
		onMounted,
		nextTick
	} from 'vue';

	import emojiComment from '@/components/modelDetail/emoji/emojiComment.vue';
	import indexApi from '@/module/modelDetail/api/index.js';
	import apiUrl from '@/constant/modelDetail/apiUrl.js';
	import jwt_decode from 'jwt-decode';

	let {
		proxy
	} = getCurrentInstance();

	const emit = defineEmits(['getCartGoodStatus']);

	const apiUrlINFO =
		import.meta.env.VITE_API_URL_INFO;

	import {
		useRouter
	} from 'vue-router';
	import {
		useRoute
	} from 'vue-router';
	let router = useRouter();
	let route = useRoute();

	let commentList = reactive({});
	let goodsList = reactive({});
	let cartGoodsStatus = reactive({});
	let cartGood = reactive({});
	let goodsPic = reactive({});

	let rate = ref(0);
	let tips = ref('');
	let myRate = ref(null);

	let currentUrl = ref('');

	let currentMenuItem = reactive([]);
	let dId = ref();
	let currentPage = ref(1);
	let currentPageSize = ref(10); 
	let commentLength = ref();
	let mentionList = reactive({});
	
	let rateStatus = reactive({});
	
	function refrushComment(data){
		if(data == true){
			nextTick(()=>{
				loadingCommentList();
			});
		}
	}

	async function addCart() {
		cartGood = reactive({
			'name': goodsList.data.title,
			'info': goodsList.data.info,
			'sPrice': goodsList.data.price,
			'amount': 1,
			'src': goodsList.data.href,
			'uId': jwt_decode(sessionStorage.getItem("token")).uid,
			'mId': goodsList.data.mId
		});
		console.log('cartGood',cartGood);
		cartGoodsStatus.resp = await indexApi.addCartGood(cartGood);
		cartGoodsStatus.flag = cartGoodsStatus.resp.flag;
		cartGoodsStatus.message = cartGoodsStatus.resp.message;
		console.log('cartGoodsStatus',cartGoodsStatus);
		if(cartGoodsStatus.flag == true && cartGoodsStatus.resp.message == '添加成功'){
			proxy.$notification.info({content: '添加成功',position: 'topLeft'});
			emit('getCartGoodStatus',true);
		}
		else if(cartGoodsStatus.flag == false && cartGoodsStatus.resp.message == '添加失败')
			proxy.$notification.error({content: '购物车已存在该商品',position: 'topLeft'});
	}

	async function loadingGoodsList() {
		goodsList.resp = await indexApi.getGoodsList(route.params.id,jwt_decode(sessionStorage.getItem("token")).uid);
		goodsList.data = goodsList.resp.data;
		//去除首位空格后,使用正则表达式去除字符串中间空格
		goodsList.data.formatInfo = goodsList.data.info.trim().split(/\s+/);
		goodsList.data.formatNickName = goodsList.data.nickName.trim().split(/\s+/);
		if(goodsList.data.myRate != 0)
			rate.value = goodsList.data.myRate;
		console.log('goodsList', goodsList.data);
		return goodsList;
	}
	
	async function loadingGoodsPic(){
		goodsPic.resp = await indexApi.getGoodsPic(route.params.id);
		goodsPic.data = goodsPic.resp.data;
		dId.value = goodsPic.data.dId;
		console.log('goodsPic',goodsPic.data);
		//根据模型返回的图片是否为空，判断应该渲染的图片选项
		if(goodsPic.data.manual != null && goodsPic.data.pictures == null){
			currentMenuItem.push('1');
		}
		else if(goodsPic.data.manual == null && goodsPic.data.pictures != null){
			currentMenuItem.push('2');
		}
		else if(goodsPic.data.manual != null && goodsPic.data.pictures != null){
			currentMenuItem.push('1');
			currentMenuItem.push('2');
		}
		loadingCommentList();
	}

	function valueChange(value) {
		//console.log('value', value);
		if (value > 0 && value <= 1) {
			tips.value = '很差';
		} else if (value > 1 && value <= 2) {
			tips.value = '勉强';
		} else if (value > 2 && value <= 3) {
			tips.value = '还行';
		} else if (value > 3 && value <= 4) {
			tips.value = '精品';
		} else if (value > 4 && value <= 5) {
			tips.value = '完美';
		}
		//console.log('tips', tips.value);
	}
	
	async function changeRate(value){
		console.log('rate',value);
		//用户进行评分，发起请求，记录评分
		console.log('mId',route.params.id);
		console.log('uId',jwt_decode(sessionStorage.getItem("token")).uid);
		let RateDto = {
			rate: value,
			mId: route.params.id,
			uId: jwt_decode(sessionStorage.getItem("token")).uid
		};
		console.log('RateDto',RateDto);
		rateStatus.resp = await indexApi.saveUserRate(RateDto);
		console.log('rateStatus.resp',rateStatus.resp);
		if(rateStatus.resp.flag == true){
			proxy.$message.success('评分成功');
			nextTick(()=>{
				loadingGoodsList();
			})
		}
		else if(rateStatus.resp.flag == false){
			proxy.$message.error('评分失败');
		}
	}

	function getUrl() {
		currentUrl.value = window.location.href;
		console.log('url', currentUrl.value);
	}

	function getMenuItem(key) {
		console.log('keyItem', key.toString());
		if (currentMenuItem.length != 0) {
			currentMenuItem.splice(0, currentMenuItem.length);
		}
		currentMenuItem.push(key.toString());
		console.log('currentMenuItem', currentMenuItem);
	}
	
	async function loadingCommentList() {
		commentList.resp = await indexApi.getModelCommentList(dId.value,{
			"currentPage": currentPage.value,
			"pageSize": currentPageSize.value,
			"queryString": ""
		});
		commentLength.value = commentList.resp.data.length;
		let commentSet = new Set();
		commentList.resp.data.forEach(item =>{
			commentSet.add(item.nickName);
		});
		mentionList.data = [...commentSet];
		/* mentionList.data = commentList.resp.data.map((item,index)=>{
			return item.nickName;
		}); */
		console.log('commentList', commentList.resp);
		return commentList;
	}
	
	function getcurrentPage(data){
		console.log('page',data);
		currentPage.value = data;
		loadingCommentList();
	}
	
	function getcurrentPageSize(data){
		console.log('size',data);
		currentPageSize.value = data;
		loadingCommentList();
	}

	onMounted(() => {
		document.documentElement.style.setProperty('--color-content', '#f4f4f4');
		document.documentElement.style.setProperty('--color-font', 'gray');
		loadingGoodsPic();
		loadingGoodsList();
		getUrl();
		console.log('env',
			import.meta.env);
		console.log('currentMenuItem', currentMenuItem);
	});
</script>

<style lang="less" scoped>
	@import '@/assets/modelDetail/css/goods.less';
</style>
